// 弹窗效果父组件
import { Component } from 'react'
import '../assets/css/Parent.css'
import Child4 from './Child4'

export default class Parent4 extends Component {

  state = {
    disalogVisible: false,
    goodsList: []
  }

  componentDidMount () {
    // 模拟异步请求获取数据
    this.setState({
      goodsList: [
        { id: 2, name: "华为", price: 6999 },
        { id: 1, name: "小米", price: 5999 }
      ]
    })
  }

  showDialog () {
    this.setState({
      disalogVisible: true
    })
  }

  hideDialog () {
    this.setState({
      disalogVisible: false
    })
  }

  deleteGood (goods) {
    let index = this.state.goodsList.findIndex(it => it.id === goods.id)
    this.state.goodsList.splice(index, 1)
    this.setState({
      goodsList: this.state.goodsList
    })
  }

  render () {
    return (
      <div className='container'>
        <h2>弹窗效果</h2>
        <button onClick={this.showDialog.bind(this)}>点击打开弹窗</button>
        {
          this.state.disalogVisible ?
            <Child4 hideDialog={this.hideDialog.bind(this)}></Child4> : ''
        }
        <hr />
        <table>
          <tr>
            <th>序号</th>
            <th>名称</th>
            <th>单价</th>
            <th>操作</th>
          </tr>
          {
            this.state.goodsList.map(goods => {
              return <tr key={goods.id}>
                <td>{goods.id}</td>
                <td>{goods.name}</td>
                <td>{goods.price}</td>
                <td>
                  <button>编辑</button>
                  <button onClick={() => this.deleteGood(goods)}>删除</button>
                </td>
              </tr>
            })
          }
        </table>
      </div>
    )
  }
}
